<template>
  <div class="sidebarBox">
    <!-- 侧边栏 -->
    <div class="sidebarClass">
      <van-sidebar v-model="sidebarKey" @change="onChangeSiderbar">
        <van-sidebar-item
          @click="sidebarClick(item)"
          :title="item.txt"
          v-for="(item,i) in sidebar_arr "
          :key="i"
          :to="{path:item.paths, query: { txt:item.txt,paths:item.paths }}"
        ></van-sidebar-item>
      </van-sidebar>
    </div>

    <!-- 右侧 -->
    <div class="didebarGoods">
      <div class="goodsItem" v-for="(n,inx) in goodsListObj" :key="inx" @click="gotoGoodsBuy(n)">
        <img :src="n.goods_img" alt />
        <p>{{n.goods_name}}</p>
        <b>{{n.goods_price}}</b>
      </div>
    </div>
    <footers></footers>
  </div>
</template>

<script>
import "../assets/resetVant.css";
import footers from "./footer_bar";
// import cate_p from "./cate_p";
import axios from "axios";

export default {
  name: "cateList",
  components: {
    footers
  },
  data() {
    return {
      baseurl: process.env.VUE_APP_BASE_URL,
      sidebarKey: 0,
      msg: "栏目页面",
      sidebar_arr: [
        { txt: "推荐专区", paths: "/cateList/p1" },
        { txt: "爆品专区", paths: "/cateList/p2" },
        { txt: "新品专区", paths: "/cateList/p3" }
        // { txt: "居家生活", paths: "/cateList/p4" },
        // { txt: "服饰鞋包", paths: "/cateList/p5" },
        // { txt: "美食酒水", paths: "/cateList/p6" },
        // { txt: "滆湖清洁", paths: "/cateList/p7" },
        // { txt: "母婴亲子", paths: "/cateList/p8" },
        // { txt: "运动旅行", paths: "/cateList/p9" },
        // { txt: "数码家电", paths: "/cateList/p10" },
        // { txt: "严选全球", paths: "/cateList/p11" }
      ],
      goodsListObj: null
    };
  },
  methods: {
    // 商品购买页
    gotoGoodsBuy(_n) {
      // 带参数的路由
      this.$router.push({ name: "goods_detail", params: { goods_info: _n } });
    },
    // 切换商品
    onChangeSiderbar(index) {
      // console.log(index);
      axios.get(`${this.baseurl}/cate_goods_list_` + index).then(_d => {
        // console.log(_d);
        this.goodsListObj = _d.data;
      });
    },
    sidebarClick(item) {
      console.log(item);
      // this.$router.push(item.paths);
    }
  },
  created() {
    this.onChangeSiderbar(0);
  }
};
</script>

<style lang="scss" scoped>
.sidebarBox {
  position: relative;
  padding-left: 2.16rem;
}
.sidebarClass {
  font-size: 0.5rem;
  position: fixed;
  left: 0;
  top: 0;
}
.goodsItem {
  width: 42%;
  float: left;
  margin: 0 0.2rem 0.44rem 0.2rem;
  font-size: 0.32rem;
}
</style>